import { StyleSheet } from 'react-native';

const infoHeight = 64;
const listItemPadding = 5;

export default StyleSheet.create({
  chartWrap: {
    backgroundColor: '#fff',
    justifyContent: 'flex-end',
    alignItems: 'stretch',
  },
  infoWrap: {
    height: 64,
    backgroundColor: '#fff',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  },
  infoItem: {
    alignItems: 'center',
    flex: 1
  },
  infoItemName: {
    fontSize: 14,
    color: '#666'
  },
  infoItemCount: {
    fontSize: 16,
    color: '#333'
  },
  infoItemRate: {
    fontSize: 12,
    color: '#999'
  },
  leftBorder: {
    borderLeftWidth: 1,
    borderLeftColor: '#ddd'
  },
  listWrap: {
    paddingTop: listItemPadding
  },
  listItemSwipe: {
    marginBottom: listItemPadding,
    backgroundColor: 'transparent'
  },
  listItem: {
    marginLeft: listItemPadding,
    marginRight: listItemPadding,
    padding: listItemPadding,
    borderRadius: 10,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f00'
  },
  listItemIcon: {
    width: 36,
    height: 36,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 18,
    marginLeft: listItemPadding
  },
  listItemIconImg: {
    width: 32,
    height: 32
  },
  listItemMain: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    padding: listItemPadding
  },
  listItemMainName: {
    fontSize: 18,
    fontWeight: 'normal',
    color: '#666'
  },
  listItemMainRemark: {
    fontSize: 14,
    fontWeight: 'normal',
    color: '#999'
  },
  listItemLimitTime: {
    color: '#999'
  }
});
